<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>巨星排行榜_龙虾直播</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
    <link rel="stylesheet" href="http://wanjia.mcooz.com/views/mobile_basic/skin/default/css/mobile.css" />
    <link rel="stylesheet" href="themes/orange.min.css" />
  
    <script type="text/javascript" charset="UTF-8" src="http://wanjia.mcooz.com/runtime/_systemjs/jquery/jquery-1.11.3.min.js"></script><script type="text/javascript" charset="UTF-8" src="http://wanjia.mcooz.com/runtime/_systemjs/jquery/jquery-migrate-1.2.1.min.js"></script>
    <script src="http://wanjia.mcooz.com/views/mobile_basic/javascript/mobile.js"></script>
    <link rel="stylesheet" href="http://wanjia.mcooz.com/views/mobile_basic/skin/default/css/index.css" />
      <link href="font/css/font-awesome.css" rel="stylesheet">

        <script type="text/javascript" charset="UTF-8" src="http://wanjia.mcooz.com/runtime/_systemjs/form/form.js"></script>
    <script type="text/javascript" charset="UTF-8" src="http://wanjia.mcooz.com/runtime/_systemjs/autovalidate/validate.js"></script>
    <link rel="stylesheet" type="text/css" href="http://wanjia.mcooz.com/runtime/_systemjs/autovalidate/style.css" />
      <script type="text/javascript" charset="UTF-8" src="http://wanjia.mcooz.com/runtime/_systemjs/artTemplate/artTemplate.js"></script><script type="text/javascript" charset="UTF-8" src="http://wanjia.mcooz.com/runtime/_systemjs/artTemplate/artTemplate-plugin.js"></script>


       <style>
 .contribution {
            margin-bottom: 30px;
            margin-top: 5px;
            min-height: 110px;
            padding-bottom: 6px;
            padding-top: 0;
            text-align: center;
            transition: margin-bottom 0.4s ease 0s;
            width: 33%;
            float:left;
            margin: 7px 0;
            position: relative;
            white-space: nowrap;
            }
 .kros-avatar {
  display: block;
  height: 74px;
  margin: 0 auto;
  position: relative;
  width: 63px;
}
 .kros-avatar img {
  height: 58px;
  margin-left: -3px;
  margin-top: 15px;
  width: 58px;
}
 .kros-icon {
  background: rgba(0, 0, 0, 0) url(image/contribution-item-icon2.png) no-repeat scroll 0 0;

  display: inline-block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.fans-list {
  background: #fff none repeat scroll 0 0;
  border-radius: 4px 4px 0 0;
  max-height: 100%;
  min-height: 100%;
  position: absolute;
  transition: max-height 0.3s ease 0s;
  overflow: hidden;
  width:100%;
}
.fans-rank {
  height: 191px;
  z-index: 200;
  position: relative;
}

.kros-2 .kros-avatar {
  height: 82px;
  width: 70px;
}
.kros-2 img {
  height: 68px;
  margin-left: 0;
  margin-top: 14px;
  width: 68px;
}
.kros {
  margin: 7px 0;
  position: relative;
  white-space: nowrap;
  list-style-type: none;
}
.kros-4 {
  clear: both;
}
.nav-tabs > li > a, .nav-tabs > li > a:focus {
  margin-right: 0px;
}
 .kros-2 .kros-icon {
  background: rgba(0, 0, 0, 0) url(image/contribution-item-icon1.png) no-repeat scroll 0 0;
 }
  .kros-3 .kros-icon {
  background: rgba(0, 0, 0, 0) url(image/contribution-item-icon3.png) no-repeat scroll 0 0;
 }
 .level-bgpng {
  background-image:  url(image/level-csssprite.png);
  display: inline-block;
  height:16px;
  width:40px;
}
.kros-1 .r-nick,.kros-2 .r-nick,.kros-3 .r-nick{
    display: block;
}
 .n-icon {
  background: #eee none repeat scroll 0 0;
  border-radius: 50%;
  color: #999;
  display: inline-block;
  font-style: normal;
  height: 20px;
  line-height: 20px;
  margin-right: 10px;
  text-align: center;
  width: 20px;
}
.kros-1 .r-nick,.kros-3 .r-nick{
 
  margin-top:10px;
  color: #797f89;
  display: block;
  font-size: 12px;
  height: 24px;
  line-height: 24px;
  max-width: 95%;
  padding-left: 0;
  text-align: center;
  width: 95%;
}


 .cuserlevel {
  vertical-align: middle;
}
.chat-cont .c-list .user_level, .chat-cont .c-list img, .chat-cont .c-list li .rank-wel .user-level, .chat-cont .c-list li .rank-wel a, .chat-cont .c-list li .task-wel .user-level, .chat-cont .c-list li .task-wel a, .chat-cont .chat-cls .icon, .fans-list .f-tit .vip img, .fans-rank .r-list li .l-icon img, .fans-rank .r-list li .n-icon, .r-list .noble-level img {
  vertical-align: middle;
}
 .r-nick {
  color: #797f89;
  display: inline-block;
  height: 26px;
  line-height: 26px;
  max-width: 110px;
  overflow: hidden;
  padding-left: 10px;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
  word-break: break-all;
}
ul, ol {
  margin: 0;
  padding: 0;
}
.video-list.clearfix {
  width: 368px;
  background: #fff;
}
.pdl6{
    padding-left: 6px;
}
.js-nick:hover{
    text-decoration: none
}
                </style>


 <script type='text/html' id='chartsTemplate_1'>

 <a href="javascript:;" class="js-nick" is-show-super-icon="0" data-ranktype="week" data-rel="user-info" avatar="avatar/006/10/66/93_avatar" rel="6106693" gid="1" data-level="15" data-noble="0" data-invisible="0" data-invisiblenick="">
            <span class="kros-avatar">
                <img src="__upload__/Portrait/<%=portrait%>"><i class="kros-icon"></i>
            </span>
            <span class="r-nick" title="CloveM"><%=nicheng%></span>
        </a>
        <span class="l-icon cuserlevel level-<%=grade_level%> level-bgpng  level-size1" data-uid="6106693" title="用户等级：15" selector="user-level"></span>
        
        </script>   

         <script type='text/html' id='chartsTemplate_2'>
         <a href="javascript:;" class="js-nick" is-show-super-icon="0" data-ranktype="week" data-rel="user-info" avatar="avanew/face/201705/17/12/9e88d0c302954feac5122e1ea82ae244" rel="63419018" gid="1" data-level="48" data-noble="4" data-invisible="0" data-invisiblenick="">
            <span class="kros-avatar">
                <img src="__upload__/Portrait/<%=portrait%>"><i class="kros-icon"></i>
            </span>
            <span class="r-nick" title=""><%=nicheng%></span>
        </a>
        <span class="noble-level">
        </span>
        <span class="l-icon cuserlevel level-<%=grade_level%> level-bgpng  level-size1" data-uid="63419018" title="" selector="user-level"></span>
            </script>  

 <script type='text/html' id='chartsTemplate_3'>
<a href="javascript:;" class="js-nick" is-show-super-icon="0" data-ranktype="week" data-rel="user-info" avatar="avatar/default/11" rel="53211322" gid="1" data-level="8" data-noble="0" data-invisible="0" data-invisiblenick="">
            <span class="kros-avatar">
                <img src="__upload__/Portrait/<%=portrait%>"><i class="kros-icon"></i>
            </span>
            <span class="r-nick" title=""><%=nicheng%></span>
        </a>
        <span class="l-icon cuserlevel level-<%=grade_level%> level-bgpng  level-size1" data-uid="53211322"  selector="user-level"></span>
  </script> 

        <script type='text/html' id='chartsTemplate_10'>
              <li class="kros kros-4 pdl6"><i class="n-icon"><%=chartsId%></i>
        <span class="noble-level">
        </span>
        <span class="l-icon cuserlevel level-<%=grade_level%> level-bgpng  level-size1" data-uid="299704"  selector="user-level"></span>
        <a href="javascript:;" class="js-nick" is-show-super-icon="0" data-ranktype="week" data-rel="user-info" avatar="avanew/face/201702/21/21/1bcf3d57e49ebb236a91a2e3fd45943a" rel="299704" gid="1" data-level="33" data-noble="1" data-invisible="0" data-invisiblenick="">
            <span class="r-nick" title=""><%=nicheng%></span>
        </a>
        <span class="r-img rank-up" title=""></span>
    </li>
        </script>  
              <script type="text/javascript" src="./script/api.js"></script>              
<script type='text/javascript'>
        
         function  charts(){
      
          
            url = 'http://www.mcooz.com/index/charts';
                    for (var i = 1; i <=3; i++) {

            api.ajax({
            url: url,
            method: 'get',
            data: {
                values: {
                    chartsId: i,
                    type:0,
                    to_id:1
                }
            }
        }, function(json, err) {

          // alert(json.nicheng);


                  });
                    }
        }

</script>
</head>

<body>

<div data-role="page" id="Home" data-theme="a">
    <div data-role="header" class="kros_header" data-position="fixed">
        <a href="index" data-rel="back" class="ui-btn-left ui-btn-corner-all ui-btn ui-icon-carat-l ui-btn-icon-notext ui-shadow">Back</a>
        <a href="#" class="ui-btn ui-btn-letf  ui-btn-corner-all ui-btn-icon-notext  ui-icon-search ui-shadow">search</a>
        <h1>排行榜</h1>
    </div>
    <div class="container">
<section>
    <div class="pending-detial">
        <div class="panel panel-default">
        <div class="row clearfix bt1">
            <div class="col-md-12 column">
                <h3>
                   <strong>巨星排行榜</strong>
                </h3>
            </div>
        </div>
        
            <div  class="video-list clearfix" id="krosrow1">
                <ul class="r-list clearfix">
              <li class="kros contribution kros-1" id="charts_2">
                   
                </li>
                <li class="kros contribution kros-2" id="charts_1">
                   
                </li>
                <li class="kros contribution kros-3" id="charts_3">
                    
                </li>
            <div id="charts_10">
              
             </div>

            </ul>
            </div>

            <div class="pro_list border-bottom" style="text-align:center;line-height:150px">当前暂无数据
            </div>
           
        </div>
    </div>
</section>

</div>
    

    <div data-role="footer"  data-position="fixed" style="background-color: #fcfcfc;border-width:0" data-theme="c">
    <div data-role="navbar" data-grid="c"  data-position="fixed" style="background-color: #fcfcfc;border-color:#fcfcfc">
        <ul>
            <li><a onclick="goToPage('index.html')"   data-ajax="false" style="background-color: #fcfcfc;border-color:#fcfcfc"  data-icon="home">首页</a></li>
             <li><a href="all.html"  data-ajax="false" style="background-color: #fcfcfc;border-color:#fcfcfc" data-icon="video" data-theme="">直播</a></li>
            <li><a href="favorite.html" data-transition="flip" data-ajax="false" style="background-color: #fcfcfc;border-color:#fcfcfc" data-icon="heart" data-theme="">关注</a></li>
            <li><a href="ucenter.html" data-icon="user" style="background-color: #fcfcfc;border-color:#fcfcfc"  data-transition="flow" rel="external">我的</a></li>
        
        </ul>
    </div>
</div>
</div>
</body>
</html>

<script type="text/javascript">
//页面跳转函数
function goToPage(page){
         api.openWin({
                                        name: 'live',
                                        url: page,
                                        pageParam: {
                                            name: 'test'
                                        },
                                      animation:  {
                                        type:"push",                //动画类型（详见动画类型常量）
                                        subType:"from_right",       //动画子类型（详见动画子类型常量）
                                        duration:200                //动画过渡时间，默认300毫秒
                                    }

                                });
         }

 apiready = function(){
charts();
};
</script>